<template>

  <div id='share'>

    <view-box ref="viewBox" style="height:100%;">

    
      <div class="warpper html_img">
        <p class="introduce1">
          <span>{{userName}}</span>邀请您参加
        </p>
        <!-- <p class='introduce2'>我报名了{{raceInfo.name}}，邀你一起！</p> -->
        <div class="poster">
          <img :src="raceInfo.poster" alt="">
        </div>

        <div>

        </div>

        <!-- <ul class='container1'>

          <li style="order: 2;flex-grow: 5;">
            <div class='race_message'>
              <p class="race_name" style="">{{raceInfo.name}}</p>
              <p>{{timeMessage}}</p>
              <p>{{typeMessage}}</p>
              <p>{{raceInfo.summary}}</p>
            </div>

          </li>

          <li style="order: 3;flex-grow: 1;">
            <div class="img_wapper">
              <qrcode  :value="shareUrl" type="canvas"></qrcode>
              
            </div>
          </li>
        </ul> -->

        <div>
          <p class="p1">{{raceInfo.name}}</p>
          <p class="p2" v-for="(item,index) in eventList" :key='index'>{{item.name}}</p>
          <p class="p3">{{timeMessage}}</p>
          <!-- <p style="font-size:14px;line-height:1.5">{{typeMessage}}</p> -->
          <!-- <p style="font-size:14px;line-height:1.5">{{raceInfo.summary}}</p> -->
        </div>

        <div style="text-align: center;" class="img_wapper">
          <qrcode :size=qrsize style="margin:0 auto;" :value="shareUrl" type="canvas"></qrcode>
        </div>

      </div>

      <!-- <XButton type='primary' v-if="isPc" @click.native='down'> 下载</XButton> -->
      <!-- <div v-if="isPc" @click='down'>下载</div> -->
      <!-- <div v-if="!isPc">长按保存并下载</div> -->

      <div class="container">
        <p>分享返现说明</p>
        <div v-if='maxMoney!=0'>
          <Group>
            <cell title="返现形式" :value='cashback_type'></cell>
            <cell title="返现比例" :value="cashback_propMessage"></cell>
            <cell title="结算周期" value="赛事结束后一周"></cell>
            <cell title="状态" :value="userState"></cell>
            <!-- <cell title="返现形式" value="现金"></cell> -->
          </Group>
        </div>
        <div v-if='maxMoney==0'>
          <Group>
            <cell title="不返现"></cell>

          </Group>
        </div>

      </div>

      <div class="container">
        <p>我的成就</p>
        <div>
          <Group>
            <cell title="有效报名数" :value="friendLength+'人'"></cell>
            <cell title="预计返现数" :value="'¥'+callbackMoney"></cell>
          </Group>
          <div class="users">
            <ul>
              <li v-for="(item,index) in friendlist.slice(0,friendLength)" :key='index'>
                <span>{{item.name[0]}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="container rule">
        <p class="vux-1px-b">规则说明</p>
        <div>
          <p>
            1、长按并保存上边海报图片并分享给您的朋友，海报中二维码为您的专属二维码，通过该二维码每产生一名有效报名，您将获得一定额度的返现，具体返现比例以赛事“返现说明”描述为准，返现总金额最高不超过该项目报名费；
          </p>
          <p>
            2、有效报名指用户符合同一赛事指定项目报名条件并完成支付且没有发生退款行为；
          </p>
          <p>
            3、返现将在赛事结束后一周内进行结算，具体返现形式以赛事“返现说明”描述为准；
          </p>
          <p>
            4、现金返现以退款的形式退还到您报名时的扣款账户，代金券返现将以代金券的形式发放到您的“汇跑商城”账号；
          </p>
          <p>
            5、如您申请了退款，则表示放弃上述权益，将不再进行返现。
          </p>
        </div>
      </div>

    </view-box>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";

//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  Qrcode,
  CellBox,
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  ViewBox,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";
import mixin from "@/common/js/mixin";
import {
  isIdNumber,
  setTitle,
  timeFormat,
  toDecimal2
} from "@/common/js/main.js";
import { setTimeout } from "timers";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      eventList: [],
      qrsize: 100,
      isPc: false,
      callbackMoney: 0,
      friendLength: 0,
      callbackMoney: "",
      userInfo: {},
      friendlist: [],
      cashback_type: "", //返现类型 cash 现金 voucher 代金券
      cashback_prop: "", //返现比例 %百分比
      raceInfo: {},
      timeMessage: "",
      typeMessage: "",
      userkey: "",
      userName: "",
      maxMoney: "" //最近金额
    };
  },
  computed: {},
  beforeCreate() {},
  created() {
    this.raceInfo = JSON.parse(window.localStorage.raceinfo);

    this.isPc = window.localStorage.getItem("isPc") === "true" ? true : false;
    this.qrsize = this.isPc == true ? (this.qrsize = 250) : (this.qrsize = 100);

    //分享页面二维码链接
    this.shareUrl = window.location.href.replace(/share/, "list");
    this.shareUrl = this.shareUrl.replace(/userKey/, "_from");
    //console.log(this.shareUrl);

    switch (this.raceInfo.cashback_type) {
      case "cash":
        this.cashback_type = "现金";
        break;
      case "voucher":
        this.cashback_type = "代金券";
        break;
      default:
    }

    this.cashback_prop = parseFloat(this.raceInfo.cashback_prop);
    this.cashback_propMessage =
      "每产生一名有效报名返" + this.cashback_prop + "%报名费";
    //onsole.log(this.cashback_prop)
    //console.log(this.raceInfo)
    //比赛时间
    var timeMessage =
      this.raceInfo.reg_begin.split(" ")[0] +
      " " +
      this.raceInfo.reg_begin.split(" ")[1].split(":")[0] +
      ":" +
      this.raceInfo.reg_begin.split(" ")[1].split(":")[1];

    this.userkey = this.$route.query.userKey;
    //console.log(this.$route.query.userKey);

    //console.log(this.$route.query.userkey)

    //Vue.$set(raceInfo,'timeMessage',timeMessage);
    //this.$set(this.raceInfo,'timeMessage',timeMessage)
    //Object.assign({}, this.$data.items);
    this.timeMessage = timeMessage;
    //console.log(this.raceInfo);

    //_this.$set(this, "raceInfo", e);
    //赛事类型
    //this.raceInfo.typeMessage = "";
    switch (this.raceInfo.type) {
      case "marathon":
        //this.raceInfo.typeMessage = "全程马拉松";
        this.typeMessage = "全程马拉松";
        break;
      case "half":
        //this.raceInfo.typeMessage = "半程马拉松";
        this.typeMessage = "半程马拉松";
        break;
      case "10km":
        //this.raceInfo.typeMessage = "10公里跑";
        this.typeMessage = "10公里跑";
        break;
      case "happyrun":
        //this.raceInfo.typeMessage = "欢乐跑";
        this.typeMessage = "欢乐跑";
        break;
      case "ultramarathon":
        //this.raceInfo.typeMessage = "超级马拉松";
        this.typeMessage = "超级马拉松";
        break;
      case "longtrail":
        //this.raceInfo.typeMessage = "100公里以上级越野赛";
        this.typeMessage = "100公里以上级越野赛";
        break;
      case "100km":
        //this.raceInfo.typeMessage = "100公里级越野赛";
        this.typeMessage = "100公里级越野赛";
        break;
      case "50km":
        //this.raceInfo.typeMessage = "50公里级越野赛";
        this.typeMessage = "50公里级越野赛";
        break;
      case "marathontrail":
        //this.raceInfo.typeMessage = "山地马拉松";
        this.typeMessage = "山地马拉松";
        break;
      case "trailrunning":
        //this.raceInfo.typeMessage = "短距离越野赛";
        this.typeMessage = "短距离越野赛";
        break;
      case "other":
        //this.raceInfo.typeMessage = "其他";
        this.typeMessage = "其他";
        break;
      default:
    }

    this.getUserMessage();

    ///friends?id=5b8e1fb07718b

    //console.log(this);
    //console.log(this.raceInfo);

    //console.log(JSON.parse(window.localStorage.raceinfo))
  },
  mounted() {},
  methods: {
    down() {
      // 保存文件函数

      var img = document.querySelector(".warpper.html_img img");
      var url = img.src;
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = name || "下载图片名称";
      a.href = url;
      a.dispatchEvent(event);
    },
    getFriends() {
      var _this = this;
      this.axios
        .post(
          `${host}registration/friends`,
          qs.stringify({
            id: this.userkey
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            //结果
            //返现金额
            _this.callbackMoney = 0;
            //有效返现人数
            _this.friendLength = 0;
            //结果结束

            //配置项目
            //报名人数
            this.friendlist = response.data.data;

            //this.friendlist.push({name:'哈哈'})
            //this.friendlist.push({name:'休息'})
            //this.friendlist.push({name:'哈哈'})
            //最大返现金额 根据订单的实际付款金额来算
            _this.maxMoney = _this.userInfo.order.amount;
            //_this.maxMoney=1000
            //返现折扣
            var cashback_prop = _this.cashback_prop;
            //var cashback_prop =1.5

            //折扣

            //模拟计算

            //订单金额
            //var maxmoney = 100;

            //折扣
            //var cashback_prop = 1.3;

            //人数
            //var maxlength = 100;

            //有效金额
            //var money = 0;

            //有效人数
            //var length = 0;

            for (var i = 0; i < _this.friendlist.length; i++) {
              if (_this.callbackMoney >= _this.maxMoney && i == 0) {
                _this.callbackMoney = 0;
                _this.friendLength = 0;
                break;
              }
              //console.log(money+'返现前')
              //console.log(maxmoney+'最大返现额度')
              //console.log((money)<=maxmoney)
              //alert(_this.maxMoney )
              //alert(cashback_prop )

              //alert(_this.callbackMoney + _this.maxMoney * cashback_prop / 100 <= _this.maxMoney)
              if (
                _this.callbackMoney + _this.maxMoney * cashback_prop / 100 <=
                _this.maxMoney
              ) {
                _this.callbackMoney += _this.maxMoney * cashback_prop / 100;
                //每次计算完 去掉多余的小数点位
                _this.callbackMoney =
                  Math.round(_this.callbackMoney * 100) / 100;
                _this.friendLength = i + 1;
              } else {
                //console.log(i+'好了')
              }
              //console.log(money+'返现后')
              //console.log(length+'有效人数')
            }

            //console.log(_this.callbackMoney)
            //console.log(_this.friendLength)

            //console.log(_this.userInfo.order.amount);

            //console.log(this.cashback_prop);
            //console.log(response.data.data);
          }
        });
    },
    getlist(id) {
      var _this = this;
      //alert(1)
      this.axios
        .post(
          `${host}race/events`,
          qs.stringify({
            raceid: id
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            console.log(response.data.data);
            this.eventList = response.data.data;

            setTimeout(() => {
              var shareContent = document.querySelector(".html_img");
              var width = shareContent.clientWidth;
              var height = shareContent.clientHeight;
              var canvas = document.createElement("canvas");
              var scale = 2;
              var content2 = $(shareContent).clone(true);

              canvas.width = width * scale;
              canvas.height = height * scale;
              var a = canvas.getContext("2d");
              canvas.getContext("2d").scale(scale, scale);
              a.translate(
                "-" + (document.querySelector("#app").offsetLeft + 0.5),
                document.querySelector("#app").offsetTop - 1
              );

              var opts = {
                scale: scale,
                canvas: canvas,
                //logging: true,
                width: width,
                height: height,
                useCORS: true
              };
              html2canvas(shareContent, opts).then(function(canvas) {
                //var context = canvas.getContext("2d");

                var img = Canvas2Image.convertToImage(
                  canvas,
                  canvas.width,
                  canvas.height
                );

                document.querySelector("#share .warpper").style.border = "0";
                document.querySelector("#share .warpper").style.padding = "0";
                document.querySelector(".html_img").innerHTML = "";
                document.querySelector(".html_img").appendChild(img);
                //document.querySelector(".html_img").appendChild(canvas);
                $(img).css({
                  width: "100%"
                  //height: canvas.height  + "px"
                });
              });
            }, 1000);
          }
        });
    },
    getUserMessage() {
      var _this = this;
      //alert(1)
      this.axios
        .post(
          `${host}registration/show`,
          qs.stringify({
            id: this.userkey
          })
        )
        .then(response => {
          if (response.data.code == "200") {
            _this.userInfo = response.data.data;
            _this.userName = response.data.data.name;
            //console.log(this.userInfo);
            _this.userState = !!_this.userInfo.cashback_at ? "已返" : "待返";
            //console.log(1)
            _this.getlist(_this.raceInfo.id);
            //console.log(response.data.data);
            //alert(222)
            _this.getFriends();
          } else {
          }
        });
    }

    //this.axios.post(,qs.st)
  },
  directives: {
    TransferDom
  },
  components: {
    Qrcode,
    CellBox,
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.container {
  margin-top: 15px;
  border: 1px solid #ccc;
  background: white;
  & > p {
    line-height: 3;
    padding-left: 15px;
    padding-right: 15px;
  }
}

#app .html_img {
  //position: absolute;
}

#share .warpper {
  border: 1px solid #ccc;
  padding: 15px;
  background: white;
  .introduce1 {
    padding-bottom: 15px;
    span {
      color: #26a2ff;
      line-height: 1.5;
    }
  }
  .introduce2 {
    font-size: 14px;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .poster {
    img {
      width: 100%;
    }
  }
  .race_message {
    font-size: 0px;
    & > div {
      display: inline-block;
      width: 80%;
      font-size: 20px;
      vertical-align: top;
    }
    .qr {
      width: 20%;
      img {
        width: 100%;
      }
    }
    .race_name {
      font-size: 20px;
    }
    p {
      font-size: 16px;
    }
  }

  .details {
    line-height: 1.2;
    font-size: 14px;
    background: #ecebeb 33%;
  }
}

#share .users {
  text-align: center;
}

#share .users > ul {
  font-size: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  li {
    display: inline-block;
    width: 25%;
    span {
      width: 50px;
      display: inline-block;
      height: 50px;
      background-color: #26a2ff;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: white;
      font-size: 20px;
    }
  }
}

#share .container .weui-cells {
  margin-top: 0;
}

#share .rule {
  & > div {
    padding: 15px;
  }
  p {
    line-height: 1.8;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

#share ul.container1 {
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  -webkit-flex-flow: row nowrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: flex-start;
  //background: #ccc;
  height: 100%;
  li {
    height: 200px;
    & > div {
      //line-height: 200px;
      //vertical-align: middle;
      //align-items: center;
      img {
        align-items: center;
      }
    }
    .img_wapper {
      line-height: 200px;
      img {
        vertical-align: middle;
      }
    }
  }

  .race_message {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
  }
  img {
    max-width: 100%;
    max-height: 200px;
  }
}

#share .warpper .introduce1 {
  line-height: 2.5;
  padding-bottom: 0px;
}
.p1 {
  padding-top: 10px;
  font-weight: bold;
  font-size: 20px;
  line-height: 2;
  //  padding-top: 20px;
  //  padding-bottom: 20px;
}

.p2 {
  // padding-bottom: 10px;
  line-height: 2;
}

.p3 {
  // padding-bottom: 10px;
  line-height: 2;
}

.img_wapper {
  margin-top: 20px;
  margin-bottom: 20px;
}

@media screen and(min-width:850px) {
  #share .warpper .introduce1 {
    line-height: 2.5;
    padding-bottom: 0px;
    font-size: 40px;
  }
  .p1 {
    padding-top: 10px;
    font-weight: bold;
    font-size: 50px;
    line-height: 2;
    //  padding-top: 20px;
    //  padding-bottom: 20px;
  }

  .p2 {
    font-size: 40px;
    // padding-bottom: 10px;
    line-height: 2;
  }

  .p3 {
  font-size: 40px;
  line-height: 2;
}

  .img_wapper {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}
</style>






